<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    #all{
      height:400px;
      width:600px;
      position: absolute;
      left:50px;
      top:100px;
      padding:10px;
    }
    #father{
      position:absolute;
      bottom:0;
    }
    #father div{
      background-color: aqua;
      display: inline-block;
      border:1px red solid;
      transition: left 1s;
      position:absolute;
      text-align: center;
      bottom: 0;
    }
    input{
      margin: 10px;
    }
  </style>
  <script>
    var Num = 0;
    // 总运行
    function run(){
      // 避免多次点击
      if(Num>1){
        console.log("重复点击！！！");
        return 
      }
      var father = document.getElementById("father");
      var len = init(father);
      if(len == 1){
        return
      }
      Num += 1;
      var listChild = child(father);
      var list = listAll(len);
      // 表示运行多少次
      var num = 0;
      var time = setInterval(()=>{
        if(num==list.length-1){
          setTimeout(()=>{
            del(father);
            Num = 0;
          },4000);
          clearInterval(time);
        }
        var time1 = setTimeout(()=>{
          var lis = list[num];
          // 交换函数，交换一下
          tmp(lis[0], lis[1],listChild);
          clearTimeout(time1);
        },1000)
        var time2 = setTimeout(()=>{
          var lis = list[num];
          listChild[lis[0]].style.backgroundColor="aqua";
          listChild[lis[1]].style.backgroundColor="aqua";
          num += 1;
          clearTimeout(time2);
        },1900)
      },2000);
    }
    // 初始化
    function init(father){
      var all = document.getElementById("all");
      // 获得input标签的内容
      var text = document.form.text.value.split(" ");
      for(i in text){
        var j = Number(text[i]);
        if(isNaN(j)){
          return 1
        }
        if(j>78){
          return 1
        }
        // 设置间隔为30，减去一个30
        var width = 600/text.length-30;
        var height = 20+j*5+"px";
        let div = document.createElement("div");
        div.innerHTML = j;
        div.style.lineHeight=height;
        div.style.height=height;
        div.style.width = width+"px";
        if(width>100){
          div.style.width="100px";
        }
        if(width<20){
          div.style.width="20px";  
        }
        div.style.left = (width+30)*i + "px";
        father.appendChild(div);
      }
      all.style.backgroundColor = "rgb(31, 97, 97)";
      return text.length;
    }
    // 获得所有孩子
    function child(father){
      var listChild = father.childNodes;
      var array = [];
      for(var i=1;i<listChild.length;i++){
        array.push(listChild[i]);
      }
      return array;
    }
    // 交换函数
    function tmp(one, two, listChild){
      var div1 = listChild[one];
      var div2 = listChild[two];
      var height1 = Number(div1.style.height.replace("px",""));
      var height2 = Number(div2.style.height.replace("px",""))
      if(height1>height2){
        var left1 = div1.style.left;
        div1.style.left = div2.style.left;
        div2.style.left = left1;
        listChild[one] = div2;
        listChild[two] = div1;
      }
      listChild[one].style.backgroundColor="red";
      listChild[two].style.backgroundColor="red";
    }
    // 所有的运动轨迹
    function listAll(len){
      var array = [];
      var num = len;
      while(num!=1){
        for(var i=0;i<num-1;i++){
          var list=[];
          list.push(i);
          list.push(i+1);
          array.push(list);
        }
        num--;
      }
      return array 
    }
    // 结束化
    function del(father){
      var all = document.getElementById("all");
      all.style.backgroundColor="white";
      var childAll = father.childNodes;
      for(var i=childAll.length-1;i>=1;i--){
        father.removeChild(childAll[i]);
      }
    }
  </script>
</head>
<body>
  <div>
    <form name="form">
      <input type="text" id="text" placeholder="请输入:1 2 3...类似的"/><br/>
      <input type="button" onclick="run()" value="确认"/>
    </form>
  </div>
  <div id="all">
    <div id="father">
    </div>
  </div>
</body>
</html>